<template>
  <div style="padding-top:85px;display: flex;justify-content: center;">
    <!--社区-->
    <div id="community">
      <!--社区顶部-->
      <div id="communitynav" style="height: 60px;display: flex;justify-content: space-between;align-items: center;">
        <!--<h3 style="float: left;">量化社区</h3>-->
        <img src="../../../static/image/shequbiaoti.png" style="width:150px;margin-top: 10px;" />
        <div style="display: flex;flex-direction: row;align-items: flex-end;">
          <span class="glyphicon glyphicon-search"></span>
          <input
            type="text"
            placeholder="找文章/找作者"
            class="form-control"
            v-model="keyword"
            id="search"
            style="margin-right:8px;"/>
          <input type="button" @click="search" class="btn btn-primary" style="margin-right:20px;" value="搜索"/>
          <div v-if="permission.indexOf('C3') != -1" @click="fabiaowenzhang" class="btn">
            <span class="glyphicon glyphicon-pencil" style="margin-right: 2px;margin-bottom: 5px;"></span>发文章
          </div>
        </div>
      </div>

      <div id="screen">
        <div
          class="screenlabel"
          style="border-right: 1px solid #E8ECF0;"
          @click="recommend()"
          :class="{screenlabel_active:screenflag===1}">推荐</div>
        <div class="screenlabel" @click="newest()" :class="{screenlabel_active:screenflag===2}">最新</div>
      </div>

      <div id="articlelist" class="contentlist" v-for="item in communitylist" :key="item.id">
        <div @click="shequwenzhang(item.id)" style="margin-bottom:10px;">
          <h4 class="pointer" style="display: inline-block;">{{item.articleName}}</h4>
          <span class="pointer" style="display: inline-block; float: right;">{{item.createTime}}</span>
        </div>

        <!-- <div class="list_community__summary" v-html="item.content"></div> -->
        <div id="list_community_inform">
          <i class="iconfont icon-yonghu2"></i>
          <span  class="list_community_author pointer">{{item.author}}</span>

          <div style="float: right;">
            <!-- 点赞 -->
            <div class="inform_item pointer" :class="{likeactive:likeflag==true}">
              <i class="iconfont icon-collection "></i>
              <span>{{item.vote}}</span>
            </div>
            <!-- 点击率 -->
            <div class="inform_item pointer">
              <i class="iconfont icon-eye-o"></i>
              <span>{{item.readingVolume}}</span>
            </div>
            <!-- <div class="inform_item pointer">
              <i class="iconfont icon-message"></i>
              <span>{{item.comments}}</span>
            </div> -->
          </div>
        </div>
      </div>
      <div class="page" style="margin:12px 12px 20px 0px;">
        <Pagination :Current.sync="Current" :limit="limit" :totalCount="totalCount" @turn="getarticleList"></Pagination>
      </div>
    </div>
  </div>
</template>
<style scoped>
#community {
    display: flex;
    flex-direction:column;
    justify-content:center;
    width: 70%;
}
/*搜索框*/
.glyphicon-search {
  width: 35px;
  height: 35px;
  padding-top: 10px;
  text-align: center;
  margin-bottom: 3px;
  color: #e8ecf0;
}
.form-control {
  width: 200px;
  display: inline;
  border: solid 1px #e8ecf0;
}
.btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 24px;
  border-radius: 4px;
  background-color: #3C7EEE;
  color: #fff;
  cursor: pointer;
}
#screen {
  width: 1150px;
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid #e8ecf0;
}
.screenlabel {
  color: #bfbfbf;
  padding-right: 10px;
  font-size: 14px;
  height: 16px;
  line-height: 14px;
  padding: 0px 12px 0px 10px;
  font-weight: 400;
  cursor: pointer;
  display: inline-block;
}
.screenlabel_active {
  color: #333333;
}
.contentlist {
  padding: 18px 0px;
  border-bottom: 1px solid #e8ecf0;
  display: inline-block;
  width: 100%;
}
.list_community__summary {
  margin: 15px 15px;
  font-size: 14px;
  color: #748192;
  line-height: 22px;
  width: calc(100% - 16px);
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.list_community__author,
.glyphicon-user {
  color: #9da1a8 !important;
}

#list_community_inform {
  height: 30px;
}

.inform_item {
  display: inline-block;
  margin-right: 18px;
  color: #9da1a8;
}
.iconfont{
  font-size: 23px;
  margin-top: 3px;
}
.glyphicon-heart,
.glyphicon-eye-open,
.glyphicon-comment {
  width: 20px;
}
.likeactive {
  color: red;
}
</style>
<script>
import moment from "moment"
import Pagination  from './../zujian/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      screenflag: 1,
      keyword: "",
      likeflag: false,
      communitylist: [],
      Current: 1,
      limit: 10,
      totalCount: 100,
      permission:''
    };
  },
  mounted(){
    this.getarticleList()
    if(localStorage.getItem('permission') !== ''){
      this.permission = localStorage.getItem('permission').split(",")
    }
  },
  methods: {
    recommend() {
      this.screenflag = 1;
      this.getarticleList()
    },
    newest() {
      this.screenflag = 2;
      this.getarticleList()
    },
    //点赞效果
    // like() {
    //   this.likeflag = !this.likeflag;
    // },
    fabiaowenzhang () {
      console.log(localStorage.getItem('Userid'))
      if(localStorage.getItem('Userid') !== null){
        this.$router.push('/community_create')
      } else {
        this.$message('请先登录')
      }
        
    },
    shequwenzhang (id){
      this.$http.post('article/updateArticleReadingVolume?id='+id+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
        } else {
          console.log(resp.data)
        }
      })
      localStorage.setItem('communityid', id)
      this.$router.push('/community_detail')
    },
    getarticleList () {
      // let SessionToken = localStorage.getItem('SessionToken')
      if(this.screenflag === 1){
        this.$http.get('article/listAllArticlesByVote?pageNum='+this.Current+'&pageSize='+this.limit+'').then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.communitylist = resp.data.data[0].list
            this.totalCount = resp.data.data[0].total
            this.Current = resp.data.data[0].pageNum
            for(let i = 0;i<this.communitylist.length;i++){
              this.communitylist[i].createTime = moment(new Date(parseInt(this.communitylist[i].createTime))).format("YYYY-MM-DD hh:mm:ss")
            }
          } else {
            this.$message(resp.data.msg)
          }
        })
      } else if(this.screenflag === 2){
        this.$http.get('article/listAllArticlesByCreateTime?pageNum='+this.Current+'&pageSize='+this.limit+'').then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.communitylist = resp.data.data[0].list
            this.totalCount = resp.data.data[0].total
            this.Current = resp.data.data[0].pageNum
            for(let i = 0;i<this.communitylist.length;i++){
              this.communitylist[i].createTime = moment(new Date(parseInt(this.communitylist[i].createTime))).format("YYYY-MM-DD hh:mm:ss")
            }
          } else {
            this.$message(resp.data.msg)
          }
        })
      } 
    },
    search(){
      // let SessionToken = localStorage.getItem('SessionToken')
      if(this.keyword !== '') {
        this.$http.get('article/listArticlesByArticleNameOrAuthor?keyword='+this.keyword+'&pageNum=1&pageSize=10').then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            // console.log(this.screenflag,resp.data)
            this.totalCount = resp.data.data[0].total
            this.communitylist = resp.data.data[0].list
            for(let i = 0;i<this.communitylist.length;i++){
              this.communitylist[i].createTime = moment(new Date(parseInt(this.communitylist[i].createTime))).format("YYYY-MM-DD hh:mm:ss")
              console.log(this.communitylist)
            }
          } else {
            this.$message(resp.data.msg)
          }
        })
        console.log(this.keyword)
      }
    }
  }
};
</script>